<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!--
		问题: 因为vue代码是放在js文件中，所以，如果网速慢，vue代码暂时没有下载下来时，用户很可能短暂看到页面上的绑定语法，用户体验不好！
		解决: 有2个办法（ v-cloak和 v-text）
		(2).用 v-text暂时隐藏带有{{}}内容的元素
		用法：<元素 v-text="原{{}}内容"></元素>
		注意：不要在元素开始标签和结束标签直接写内容！会被v-text内容替换！ 
-->
  <div id="app">
    <h1 v-text="`Welcome:${uname}`"></h1>
		<!-- <h1 >Welcome:{{uname}}</h1> -->
  </div>
  <script>
    //模拟网络加载，延时2秒
    setTimeout(function () {
      var vm = new Vue({
        el: "#app",
        data: {
          uname: "dingding",
        },
      });
    }, 2000);
  </script>
</body>

</html>